<template>
  <UserCardList :user-list="userList"></UserCardList>

  <van-empty v-if="!userList || userList.length < 1" image="search" description="搜索结果为空" />

</template>

<script setup lang="ts">

import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import MyAxios from "../plugins/MyAxios.ts"
import qs from "qs";
import UserCardList from "../components/UserCardList.vue";

const userList = ref([])
const route = useRoute()
const { tags } = route.query

// 发送请求获取用户数据到页面展示，钩子函数
// await就是等到请求完成拿到数据再执行
onMounted(  async () => {
  const userListData = await MyAxios.get('/user/search/tags', {
    params: {
      tagNameList: tags
    },
    paramsSerializer: params => {
      return qs.stringify(params, { indices: false })
    }
  })
  .then(function (response) {
    console.log('请求/search/tags成功', response);
    return response?.data;
  })
  .catch(function (error) {
    console.log('请求/search/tags失败', error)
    return error;
  })
  if (userListData.length >= 1) {
    userListData.forEach(user => {
      if(user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData
  }

})

const mockUser = {
  id: 1,
  username: 'song',
  account: 'jyjkmj',
  avatar: 'https://img2.woyaogexing.com/2024/01/26/eed59415e34db73c!400x400.jpg',
  profile: "练习时长两年半的java练习生",
  gender: '男',
  phone: '13812345678',
  email: '404021314@qq.com',
  role: 0,
  tags: ["Java", "Python"],
  createTime: new Date()
}

</script>


<style scoped>

</style>